:root {
  --webkit-scrollbar-track-bg-color: #fafafa;
  --webkit-scrollbar-thumb-bg-color: #c9c9c9;
  --wos-body-bg: #000; /* 背景颜色 */
  --wos-theme-reverse-color: #000; /* 主题反转色 */
  --wos-box-center-bg: #f9f9f9; /* 容器中间背景颜色 */
  --wos-box-right-bg: #fff; /* 容器右侧背景颜色 */
  --wos-box-left-bg: #e9e9e9; /* 容器左侧背景颜色 */
  --wos-box-border-color: #e1e0dc; /* 容器边框颜色 */
  --wos-box-side-split-area-bg-color: #e1e0dc; /* 分隔线颜色 */
  --wos-box-side-split-resize-line-border-color: #d0d0d0; /* 分隔线颜色 */
  --wos-box-side-split-area-cursor-color: #201e20; /* 分隔中间标识颜色 */
  --wos-box-side-tree-current-color: #fff; /* 树形选中节点文字颜色 */
  --wos-theme-frontbar-bg: rgb(230 227 221 / 38%); /* 顶部背景颜色 #eaeaea */
  --wos-theme-frontbar-color: #282828; /* 顶部字体颜色 */
  --wos-top-item-color: #fff; /* 顶部菜单 */
  --wos-app-bar-bg: linear-gradient(#f6f6f4, #f5f5f3); /* 窗口标题栏背景颜色 */
  --wos-app-bar-color: #444446; /* 窗口标题栏颜色 */
  --wos-app-console-bg: #f9f9f9; /* 输出背景颜色 */
  --wos-border-color: #d5d5d5; /* 边框颜色 */
  --wos-breadcrumb-bg-color: rgb(138 138 138 / 16%); /* 面包屑背景颜色 #ececec */
  --wos-breadcrumb-bg-color-2: rgb(138 138 138 / 12% ); /* 面包屑背景颜色 #f1f1f1 */
  --wos-descriptions-input-bg: rgb(230 227 221 / 8%); /* 文本框背景颜色 #fdfdfc */

  --wos-tree-selected-color: #fff; /* 树形选中颜色 */
  --wos-el-dialog-border-color: hsl(0deg 0% 100%); /* 弹框边框颜色 */
  
  --el-collapse-item-header-color: #a5a0a7; /* 自定义收缩字体颜色 */
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-border: 1px solid var(--el-table-border-color);
  --el-table-text-color: var(--el-text-color-regular);
  --el-table-header-text-color: var(--el-text-color-secondary);
  --el-table-row-hover-bg-color: var(--el-fill-color-light);
  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
  --el-table-header-bg-color: var(--el-bg-color);
  --el-table-fixed-box-shadow: var(--el-box-shadow-light);
  --el-table-bg-color: var(--el-fill-color-blank);
  --el-table-tr-bg-color: var(--el-bg-color);
  --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
  --el-table-index: var(--el-index-normal);
  --el-checkbox-disabled-input-fill: #f5f7fa;
  --el-checkbox-disabled-border-color: #dcdfe6;

  /* ===============共用=================== */
  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
  --brand-color: var(--el-color-primary);
  --wos-font-family-bold: 'PingFangSC-Semibold-ttf', sans-serif;
  --wos-font-family-regular: 'PingFangSC-Regular-ttf', sans-serif;
  --wos-button-active-bg-color: #337ecc; /* plain 按钮active背景颜色 */
  --wos-brand-color: #409eff; /* 主题色 */
  --wos-icon-item-color: #786f70; /* 菜单按钮颜色 */
  --wos-icon-item-hover-color: #3b82f6; /* 菜单按钮颜色 */
  --wos-icon-item-bg: #dad4d4; /* 菜单按钮背景颜色 */
  --wos-folder-color: #43baf5; /* 文件夹颜色 */
  --wos-folder-hover-color: #3499d2; /* 文件夹颜色 */
  --wos-box-side-tree-current-bg: #3e94f9; /* 树形选中节点颜色 */

  color-scheme: light dark;
}

html[class='dark'] {
  --webkit-scrollbar-track-bg-color: #424242;
  --webkit-scrollbar-thumb-bg-color: #585858;
  --wos-body-bg: #000; /* 背景颜色 */
  --wos-theme-reverse-color: #fff; /* 主题反转色 */
  --wos-box-center-bg: #201e20; /* 容器中间背景颜色 */
  --wos-box-right-bg: #2a2829; /* 容器右侧背景颜色 */
  --wos-box-left-bg: #323335; /* 容器左侧背景颜色 */
  --wos-box-border-color: #111314; /* 容器边框颜色 */
  --wos-box-side-split-area-bg-color: #24292e; /* 分隔线颜色 */
  --wos-box-side-split-resize-line-border-color: #1f2428; /* 分隔线颜色 */
  --wos-box-side-split-area-cursor-color: #ececec; /* 分隔中间标识颜色 */
  --wos-box-side-tree-current-color: #fff; /* 树形选中节点文字颜色 */
  --wos-theme-frontbar-bg: rgb(9 9 9 / 38%); /* 顶部背景颜色 #282828 */
  --wos-theme-frontbar-color: #eaeaea; /* 顶部字体颜色 */
  --wos-top-item-color: #fff; /* 顶部菜单 */
  --wos-app-bar-bg: linear-gradient(#3d3c3c, #3a3b3d); /* 窗口标题栏背景颜色 */
  --wos-app-bar-color: #929495; /* 窗口标题栏颜色 */
  --wos-app-console-bg: #464648; /* 输出背景颜色 */
  --wos-border-color: #3b3c3e; /* 边框颜色 */
  --wos-breadcrumb-bg-color: rgb(255 255 255 / 18%); /* 面包屑背景颜色 #504f50 */

  --wos-breadcrumb-bg-color-2: rgb(255 255 255 / 8%); /* 面包屑背景颜色 #3b393a */

  --wos-tree-selected-color: var(--el-text-color-regular); /* 树形选中颜色 */
  --wos-el-dialog-border-color: hsl(240deg 3.7% 22%); /* 弹框边框颜色 */
  --wos-descriptions-input-bg: rgb(230 227 221 / 8%); /* 文本框背景颜色 #343434 */
  
  --el-collapse-item-header-color: #a5a0a7; /* 自定义收缩字体颜色 */
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-border: 1px solid var(--el-table-border-color);
  --el-table-text-color: var(--el-text-color-regular);
  --el-table-header-text-color: var(--el-text-color-secondary);
  --el-table-row-hover-bg-color: var(--el-fill-color-light);
  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
  --el-table-header-bg-color: #252529;
  --el-table-fixed-box-shadow: var(--el-box-shadow-light);
  --el-table-bg-color: var(--el-fill-color-blank);
  --el-table-tr-bg-color: var(--el-bg-color);
  --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
  --el-table-index: var(--el-index-normal);
  --el-checkbox-disabled-input-fill: #262727;
  --el-checkbox-disabled-border-color: #4c4d4f;
}

body,
html {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  font-family: var(--wos-font-family-regular);
  background-color: var(--wos-body-bg);
}

[v-cloak] {
  visibility: hidden !important;
}

audio {
  position: relative;
  z-index: 99;
}

body {
  display: flex;
  align-items: center;

  /* 定义body的元素垂直居中 */
  justify-content: center;

  /* 定义body的里的元素水平居中 */
}

* {
  /* 早期浏览器 */
  user-select: none;
  background-attachment: fixed;
  outline: none;
  text-size-adjust: none;
}

input,
textarea {
  user-select: text;
}

::-webkit-scrollbar {
  width: 8px !important;

  /* 对垂直流动条有效 */
  height: 8px !important;

  /* 对水平流动条有效 */
}

/* 定义滚动条的轨道颜色、内阴影及圆角 */
::-webkit-scrollbar-track {
  background-color: var(--webkit-scrollbar-track-bg-color) !important;
  border-radius: 0 !important;
}

/* 定义滑块颜色、内阴影及圆角 */
::-webkit-scrollbar-thumb {
  background-color: var(--webkit-scrollbar-thumb-bg-color) !important;
  border-radius: 2px !important;
}

/* 定义两端按钮的样式 */
::-webkit-scrollbar-button {
  background-color: transparent !important;
}

/* 定义右下角汇合处的样式 */
::-webkit-scrollbar-corner {
  background: transparent !important;
}
